<template>
	<div class="add-help-doc">
		<div>
			<label>{{ $t('route.Equipment_information') }}</label>
			<div></div>
			<button><img /><label>{{ $t('route.Add') }}{{ form.typeNum }}{{ $t('route.Equipment_information')
			}}</label></button>
		</div>
		<div>
			<el-form label-width="100px">
				<el-form-item :label="$t('route.File_Type')">
					<el-radio-group v-model="form.suffix" @change='suffixChange'>
						<el-radio-button :label="0">{{ $t('route.PDF') }}</el-radio-button>
						<el-radio-button :label="1">{{ $t('route.video') }}</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item :label="$t('route.title')">
					<el-input v-model="form.title" style="width:400px" />
				</el-form-item>
				<el-form-item :label="$t('route.classification')">
					<el-radio-group v-model="form.type">
						<el-radio-button v-for="index in 8" :label="index - 1">
							{{ formatTypeName(index - 1) }}
						</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="语言">
					<el-radio-group v-model="form.lan">
						<el-radio-button label="中文" />
						<el-radio-button label="英文" />
					</el-radio-group>
				</el-form-item>
				<el-form-item :label="$t('route.document')">
					<el-upload ref="uploadFile" :accept="accept" :limit="1" drag :action="action"
						:on-success="uploadSuccess">
						<i class="el-icon-upload"></i>
						<div class="el-upload__text">
							{{ $t('route.Drop_files_here') }}，{{ $t('route.or') }}<em>{{ $t('route.Click_Upload') }}</em>
						</div>
						<div class="el-upload__tip" style="color: #FF0000;" slot="tip">
							{{ $t('route.Only_one_pdf_and_video') }}</div>
					</el-upload>
				</el-form-item>
				<el-form-item>
					<el-button @click='addClick'>{{ $t('route.Add') }}</el-button>
				</el-form-item>
			</el-form>
		</div>


	</div>
</template>

<script>
import http from "../../js/http/http.js";
import api from "../../js/http/api.js";
import CommonUtils from "../../js/common/common-utils.js";
import Constant from '../../js/common/constant.js'
export default {
	data() {
		return {
			form: {
				title: null,
				suffix: 0,
				imgEndIndex: 0,
				url: null,
				typeNum: null,
				type: 0,
				lan: '中文'
			},
			accept: 'application/pdf',
			action: null,


		}
	},
	methods: {
		formatTypeName(type) { //0:使用文档 1:零件手册 2:常见错误 3:安装教程
			return Constant.DEVICE_SERVICE_TYPE_LIST[type];
		},
		uploadSuccess(response, file, fileList) {
			console.log(response.data)
			this.form.imgEndIndex = response.data.pageNum;
			this.form.url = response.data.url;
		},
		formatSuffix(suffix) {
			if (suffix == this.$t('route.Picture')) {
				return 0;
			} else if (suffix == this.$t('route.video')) {
				return 1;
			}
			return 0;
		},
		suffixChange(value) {
			if (this.form.suffix == 0) {
				this.accept = 'application/pdf';
				this.form.type = 6;
			} else {
				this.accept = 'video/webm,video/ogg,video/3gp,video/mp4';
				this.form.type = 3;
			}
			this.action = 'http://file.chinahikari.com:8686/hikari-cloud/file-mgr/base/updateDeviceService?typeNum=' +
				this.form
					.typeNum + '&suffix=' + this.form.suffix;
		},
		addClick() {
			if (CommonUtils.isEmpty(this.form.title)) {
				this.$message.error(this.$t('route.Title_cannot_be_empty'))
				return;
			}
			if (CommonUtils.isEmpty(this.form.url)) {
				this.$message.error(this.$t('route.File_cannot_be_empty'))
				return;
			}
			var type = this.form.type;
			//0：操作说明 1：零件手册 2：产品介绍 3：产品视频 4：电控维修 5：机械维修 6：详细说明 7：故障代码
			// 8：操作说明（英文版）9：零件手册（英文版）10：产品介绍（英文版）11：故障代码（英文版）
			if (this.form.lan == '英文') {
				if (type == 0) type = 8;
				if (type == 1) type = 9;
				if (type == 2) type = 10;
				if (type == 7) type = 11;
			}

			http.post(api.ADD_DEVICE_SERVICE, {
				title: this.form.title,
				typeNum: this.form.typeNum,
				url: this.form.url,
				imgEndIndex: this.form.imgEndIndex,
				suffix: this.form.suffix,
				type: type,
			}, data => {
				this.$message.success(this.$t('route.Successfully_added'))
			})
		},
	},
	created() {
		this.form.typeNum = CommonUtils.getParam(this, 'typeNum', 'setTypeNum');
		this.action = 'http://file.chinahikari.com:8686/hikari-cloud/file-mgr/base/updateDeviceService?typeNum=' +
			this.form
				.typeNum + '&suffix=' + this.form.suffix;
	}
};
</script>
<style lang="scss" scoped>
.add-help-doc {
	color: #444444;
	font-size: 18px;
	padding-right: 20px;
	height: calc(100vh - 100px);
	// overflow: scroll;
	scrollbar-width: none;
	/* firefox */
	-ms-overflow-style: none;
	/* IE 10+ */
	overflow-x: hidden;
	overflow-y: auto;


	>div:nth-of-type(1) {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20px;
		background-color: #ffffff;
		padding: 20px;
		border-radius: 5px;

		>label:nth-of-type(1) {
			font-weight: 600;
		}

		>div:nth-of-type(1) {
			width: 1px;
			background-color: #cccccc;
			height: 15px;
			margin: 0px 20px;
		}

		>button:nth-of-type(1) {
			background-image: url(../../assets/img/customer-1.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 5px 10px;
			border: 0px;
			display: flex;
			color: #ffffff;
			flex-direction: row;
			align-items: center;
			font-weight: 800;

			>img {
				margin-right: 7px;
				width: 15px;
				height: 15px;
				content: url(../../assets/img/customer-2.png);
			}

		}
	}

	>div:nth-of-type(2) {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20px;
		background-color: #ffffff;
		padding: 20px;
		border-radius: 5px;

		.input {}

		.div-1 {
			display: flex;
			flex-direction: row;

			>label {
				margin-left: 10px;
				width: 200px;
			}
		}


	}





}
</style>
